import React from 'react';
import { View, TouchableOpacity, ImageBackground, Dimensions, ScrollView } from 'react-native';
import { AppColors } from '../../theme/uiLib.config';
import { useRouter } from 'expo-router';
import Icon from 'react-native-vector-icons/Ionicons';

const InsuranceDetail = () => {
    const router = useRouter();
    const screenWidth = Dimensions.get('window').width;

    return (
        <View style={{ flex: 1 }}>
            <ScrollView 
                style={{ flex: 1 }}
                showsVerticalScrollIndicator={false}
            >
                <ImageBackground
                    source={require('../../../assets/images/insuredetail/insure_detail1.jpg')}
                    style={{ width: screenWidth }}
                    resizeMode="contain"
                >
                    <View style={{ aspectRatio: 0.564 }} />
                </ImageBackground>
                <ImageBackground
                    source={require('../../../assets/images/insuredetail/insure_detail2.jpg')}
                    style={{ width: screenWidth }}
                    resizeMode="contain"
                >
                    <View style={{ aspectRatio: 0.745 }} />
                </ImageBackground>
                <ImageBackground
                    source={require('../../../assets/images/insuredetail/insure_detail3.jpg')}
                    style={{ width: screenWidth }}
                    resizeMode="contain"
                >
                    <View style={{ aspectRatio: 0.87 }} />
                </ImageBackground>
                <ImageBackground
                    source={require('../../../assets/images/insuredetail/insure_detail4.jpg')}
                    style={{ width: screenWidth }}
                    resizeMode="contain"
                >
                    <View style={{ aspectRatio: 0.715 }} />
                </ImageBackground>
            </ScrollView>
            <View style={{ position: 'absolute', top: 46, left: 12 }}>
                <TouchableOpacity onPress={() => router.back()}>
                    <Icon name="chevron-back-outline" size={24} color={AppColors.tertiary} />
                </TouchableOpacity>
            </View>
        </View>
    );
};

export default InsuranceDetail;